<!-- 收藏 -->
<template>
    <div v-if="showStatus" class="bottom-btn">
        <el-button size="large" type="primary" @click="onCollectionTemplate">
            <el-icon><icon-star /></el-icon>
            收藏为{{ widget.widgetData.component.title || '组合' }}模板
        </el-button>
    </div>
    <collection-template
        ref="collectionTemplate"
        title="收藏为组合模块"
        type="comb"
    />
</template>

<script>
import { defineComponent, toRefs, ref, computed } from 'vue'
import CollectionTemplate from '@/components/edit/collection-template'
export default defineComponent({
    name: 'RowCollection',
    components: {
        CollectionTemplate
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)
        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)
        const showStatus = computed(() => !!widgetType.value && !widget.value.isFreeWidget)

        // 收藏模块ref
        const collectionTemplate = ref(null)
        const onCollectionTemplate = () => {
            collectionTemplate.value.show({
                title: '',
                categoryId: '',
                cover: '',
                data: widget.value.widgetData,
                id: '',
                sort: 1
            }).then(() => {
                // console.log('成功')
            }).catch(() => {})
        }
        
        return {
            widget,
            widgetType,
            showStatus,

            collectionTemplate,
            onCollectionTemplate
        }
    }
})
</script>

<style lang="less" scoped>
.bottom-btn {
    padding: 10px;
    .el-button {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        .el-icon {
            margin-right: 5px;
            margin-top: -2px;
            font-size: 16px;
        }
    }
}
</style>